<template>
	<view class="my_user_info_wai">
		<view class="my_user_info_wai_top">
			<view class="my_user_info_wai_top_wai">
					<image :src="userInfo.userInfo.avatarUrl" mode=""></image>
			</view>
			<view class="my_user_info_wai_top_name">
					单毅
			</view>
			
		</view>
		<view class="my_user_info_wai_bottom">
				<view class="my_user_info_wai_bottom_top">
					<view class="my_user_info_wai_bottom_top_item">
						<text>12</text>
						<text>收藏过的店铺</text>
					</view>
					<view class="my_user_info_wai_bottom_top_item">
						<text>14</text>
						<text>收藏过的商品</text>
					</view>
					<view class="my_user_info_wai_bottom_top_item">
						<text>12</text>
						<text>关注过的商品</text>
					</view>
					<view class="my_user_info_wai_bottom_top_item">
						<text>12</text>
						<text>足迹</text>
					</view>
				</view>
		<view class="my_user_info_wai_bottom_center">
			<view class="my_user_info_wai_bottom_center_top">
				<text>我的订单</text>
			</view>
			<view class="my_user_info_wai_bottom_center_center">
				<view class="my_user_info_wai_bottom_center_center_item">
					<image src="../../static/my-icons/icon2.png" mode="widthFix"></image>
					<text>待付款</text>
				</view>
				<view class="my_user_info_wai_bottom_center_center_item">
					<image src="../../static/my-icons/icon2.png" mode="widthFix"></image>
					<text>待付款</text>
				</view>
				<view class="my_user_info_wai_bottom_center_center_item">
					<image src="../../static/my-icons/icon2.png" mode="widthFix"></image>
					<text>待付款</text>
				</view>
				<view class="my_user_info_wai_bottom_center_center_item">
					<image src="../../static/my-icons/icon2.png" mode="widthFix"></image>
					<text>待付款</text>
				</view>
			</view>
		</view>
		</view>
		<view class="my_user_info_wai_bottoms">
			<view class="my_user_info_wai_bottoms_item">
				<text>收货地址</text> <image src="" mode="widthFix"></image>
			</view>
			<view class="my_user_info_wai_bottoms_item">
				<text>联系客服</text> <image src="" mode="widthFix"></image>
			</view>
			<view class="my_user_info_wai_bottoms_item" @click="logout">
				<text>退出登录</text> <image src="" mode="widthFix"></image>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {mapState,mapMutations} from "vuex"
	export default {
		name:"my-userinfo",
		data() {
			return {
				
			};
		},
		computed:{
			...mapState("m_user",["userInfo","token"])
		},
		methods:{
			...mapMutations("m_user",["updateToken"]),
			...mapMutations("m_user",["updateuserInfo"]),
			...mapMutations("m_user",["updateAddress"]),
			async logout(){
				const [err,result] = await uni.showModal({
							title: '提示',
							content:"是否要退出？",
							cancelText:"取消",
							confirmText:"确定"
					   }).catch(err => err);
					   console.log(err ,result);
					   if(result.cancel) return uni.$showMsg("取消退出") ;
					   if(result && result.confirm){
						   this.updateToken("");
						    this.updateuserInfo({});
							 this.updateAddress({});
					   }
			}
		},
		mounted(){
			console.log(this.userInfo)
		}
	}
</script>

<style lang="scss" scoped>
	.my_user_info_wai_top{
		width: 100%;
		height: 400rpx;
		background-color: #df0000;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.my_user_info_wai_top_wai{
		width: 200rpx;
		height: 200rpx;
		background-color: #fff;
		border-radius: 50%;
		border: 2px solid #fff;
		box-shadow:0px 1px 5px black;
		overflow: hidden;
	}
	.my_user_info_wai_top_name{
		margin-top: 10px;
		color: #FFFFFF;
	}
	.my_user_info_wai_top_wai image{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	.my_user_info_wai{
		width: 100%;
		height: 100vh;
		background-color: #dfdfdf;
	}
	.my_user_info_wai_bottom{
		position: relative;
		top: -10px;
	}
	.my_user_info_wai_bottom_top{
		margin: 0 15px;
		background-color: #fff;
		padding: 0 20px;
		box-sizing: border-box;
		height: 50px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 10px;
		
	}
	.my_user_info_wai_bottom_top_item{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100%;
	}
	.my_user_info_wai_bottom_top_item text{
		font-size: 14px;
		color: #222;
	}
	.my_user_info_wai_bottom_center{
		margin:0 15px;
		padding: 0 20px;
		background-color: #fff;
		margin-top:10px ;
		
	}
	.my_user_info_wai_bottom_center_top{
		line-height: 50px;
		background-color: #fff;
		color: #222;
		border-bottom: 1px solid #efefef;
		width: 100%;
	}
	.my_user_info_wai_bottom_center{
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		border-radius: 20px;
		overflow: hidden;
	}
	.my_user_info_wai_bottom_center_center{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 20px;
		
	}
	.my_user_info_wai_bottom_center_center_item{
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		padding: 10px 0;
		font-size: 14px;
	}
	.my_user_info_wai_bottom_center_center_item image{
		width: 50px;
	}
	.my_user_info_wai_bottoms{
		margin: 0 10px;
		padding: 0 20px;
		background-color: #fff;
		margin-top: 10px;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		border-radius: 20px;
	}
	.my_user_info_wai_bottoms_item{
		display:flex;
		width: 100%;
		
		justify-content: space-between;
		align-items: center;
		line-height: 60px;
		border-bottom:1px solid #efefef ;
		font-size: 14px;
	}
	.my_user_info_wai_bottoms_item image{
		width: 20px;
		height: 20px;
	}
</style>
